<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="java.util.*" import="com.happypets.model.PetBean"
	import="com.happypets.model.UserBean"%>
<%
	String path = request.getContextPath();
	//rm session
	session.removeAttribute("dogFlag");
%>
<!DOCTYPE html>
<html>
<head>
<title>Happy Pets</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"
	media="all" />
<link href="css/bootstrap-combined.min.css" rel='stylesheet'
	type='text/css'>
<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<script type="text/javascript" src="js/utils.js"></script>

<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/jRating.jquery.css" rel="stylesheet" type="text/css"
	media="all" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Feng design" />
<script type="application/x-javascript">
	 addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } 
</script>
<!--fonts-->
<link
	href='http://fonts.useso.com/css?family=Alegreya+Sans+SC:100,300,400,500,700,800,900,100italic,300italic,400italic,500italic,700italic,800italic,900italic'
	rel='stylesheet' type='text/css'>
<link
	href='http://fonts.useso.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic'
	rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/flexslider.css" type="text/css"
	media="screen">
<!--//fonts-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>

<script type="text/javascript">
					jQuery(document).ready(function($) {
						$(".scroll").click(function(event){		
							event.preventDefault();
							$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
						});
					});
				</script>
<!-- start menu -->
<script src="js/simpleCart.min.js"> </script>
<link href="css/memenu.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/memenu.js"></script>
<script type="text/javascript" src="js/my.js"></script>


<script>$(document).ready(function(){$(".memenu").memenu();});</script>
<script type="text/javascript" src="js/myModal.js"></script>
<script type="text/javascript" src="js/cart.js"></script>
<script type="text/javascript" src="js/bootstrap-paginator.js"></script>
<script type="text/javascript" src="js/show-pet-infos.js"></script>
</head>
<body>


	<!-- 复制头部部分 -->
	<!--top-header-->
	<div class="top-header">
		<div class="container">
			<div class="top-header-main">
				<div class="col-md-4 top-header-left">
					<div class="search-bar">
						<!-- --------search-----no---- -->
						<input type="text" id="keywordSearch" value="搜索"
							onfocus="this.value = '';"
							onblur="if (this.value == '') {this.value = '搜索';}"> <input
							type="submit" value="" onclick="keywordSearch()">
						<!-- --------end------------ -->
					</div>
				</div>
				<div class="col-md-4 top-header-middle">
					<a href="index.jsp"><img src="../images/logo.png" alt="" /></a>
				</div>
				<div class="col-md-4 top-header-right">
					<div class="cart box_1">


						<!-- --------------------------------------购物车与登录部分----------------------no--------------------------- -->
						<p>

							<%
								UserBean user = (UserBean) session.getAttribute("user");
								String userId = "0";
								if (user == null) {
							%>
							<span id="login_in" class=" btn-lg" data-toggle="modal"
								data-target="#loginModal">登录</span>/ <span id="regist"
								class=" btn-lg" data-toggle="modal" data-target="#registModal">注册</span>
							<span> <a data-target="#loginModal"><%
 	} else {
 %> <a href="userInfo.jsp" class="btn"><span> <%=user.getUserName()%>
								</span></a><span class=" btn" id="exit-btn">退出</span> <a href="checkout.jsp"><%
 	userId = user.getUserId();
 	}
 %> 
									<h3>
										<div class="total">

											<span class="simpleCart_total"></span> (<span
												id="simpleCart_quantity" class="simpleCart_quantity"></span>
											爱宠)

										</div>
									</h3> <img src="../images/cart-1.png" alt="" />
							</a></span>
						</p>


						<p>
							<a href="javascript:;" class="simpleCart_empty">空购物车</a>
						</p>

						<script type="text/javascript">
							//初始化购物车
							cart_add(1,1,3,<%=userId%>,0);
						</script>

						<!-- ----------------------------------------------------end----------------------------------------------------->

						<div class="clearfix"></div>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!--top-header-->
	<!--bottom-header-->
	<div class="header-bottom">
		<div class="container">
			<div class="top-nav">
				<ul class="memenu skyblue">
					<li class="active"><a href="index.jsp">主页</a></li>
					<li class="grid"><a href="dogs.jsp?kind=1">狗狗</a>
						<div class="mepanel">
							<div class="row">
								<div class="col1 me-one">
									<h4>大型犬</h4>
									<ul>
										<!--从数据库中读取前8条狗类图片-->
										<!-- 直接读取耗时，为了能修改还是建议从数据库中读取 -->
										<!-- 再次思考认为直接写死，后台修改 -->
										<!--  页面跳转到servlet-->
										<li><a href="products.html">藏獒</a></li>
										<li><a href="products.html">卡斯罗</a></li>
										<li><a href="products.html">罗威纳犬</a></li>
										<li><a href="products.html">阿拉斯加雪橇犬</a></li>
										<li><a href="products.html">法老王猎犬</a></li>
										<li><a href="dogs.jsp?kind=1">更多</a></li>
									</ul>
								</div>
								<div class="col1 me-one">
									<h4>中型犬</h4>
									<ul>
										<li><a href="products.html">斑点狗</a></li>
										<li><a href="products.html">杜宾犬</a></li>
										<li><a href="products.html">哈士奇</a></li>
										<li><a href="products.html">灵缇</a></li>
										<li><a href="dogs.jsp?kind=1.jsp">更多</a></li>
									</ul>
								</div>
								<div class="col1 me-one">
									<h4>小型犬</h4>
									<ul>
										<li><a href="products.html">吉娃娃</a></li>
										<li><a href="products.html">蝴蝶犬</a></li>
										<li><a href="products.html">北京犬</a></li>
										<li><a href="products.html">苏格兰梗</a></li>
										<li><a href="products.html">比格猎犬</a></li>
										<li><a href="products.html">拉萨犬</a></li>
										<li><a href="dogs.jsp">更多</a></li>
									</ul>
								</div>
							</div>
						</div></li>
					<li class="grid"><a href="dogs.jsp?kind=2">猫咪</a>
						<div class="mepanel">
							<div class="row">
								<div class="col1 me-one">
									<h4>长毛猫</h4>
									<ul>
										<li><a href="products.html">波斯猫</a></li>
										<li><a href="products.html">布偶猫</a></li>
										<li><a href="products.html">伯曼猫</a></li>
										<li><a href="products.html">索马里猫</a></li>
										<li><a href="products.html">巴厘猫</a></li>
										<li><a href="dogs.jsp?kind=2">更多</a></li>
									</ul>
								</div>
								<div class="col1 me-one">
									<h4>短毛猫</h4>
									<ul>
										<li><a href="products.html">中国狸花猫</a></li>
										<li><a href="products.html">埃及猫</a></li>
										<li><a href="products.html">俄罗斯蓝猫</a></li>
										<li><a href="products.html">孟买猫</a></li>
										<li><a href="dogs.jsp?kind=2">更多</a></li>
									</ul>
								</div>
								<div class="col1 me-one">
									<h4>无毛猫</h4>
									<ul>
										<li><a href="products.html">斯芬克斯猫</a></li>
										<li><a href="products.html">加拿大无毛猫</a></li>
										<li><a href="dogs.jsp?kind=2">更多</a></li>
									</ul>
								</div>
							</div>
						</div></li>
					<li class="grid"><a href="single.html">鸟类</a>
						<div class="mepanel">
							<div class="row">
								<div class="col1 me-one">
									<h4>鸣禽</h4>
									<ul>
										<li><a href="products.html">New Arrivals</a></li>
										<li><a href="products.html">Men</a></li>
										<li><a href="products.html">Women</a></li>
										<li><a href="products.html">Accessories</a></li>
										<li><a href="products.html">Kids</a></li>
										<li><a href="products.html">login</a></li>
										<li><a href="products.html">Brands</a></li>
										<li><a href="products.html">更多</a></li>
									</ul>
								</div>
								<div class="col1 me-one">
									<h4>宠物鸟</h4>
									<ul>
										<li><a href="products.html">Men</a></li>
										<li><a href="products.html">Women</a></li>
										<li><a href="products.html">Brands</a></li>
										<li><a href="products.html">Kids</a></li>
										<li><a href="products.html">Accessories</a></li>
										<li><a href="products.html">更多</a></li>
									</ul>
								</div>
								<div class="col1 me-one">
									<h4>观赏鸟</h4>
									<ul>
										<li><a href="products.html">Levis</a></li>
										<li><a href="products.html">Persol</a></li>
										<li><a href="products.html">Nike</a></li>
										<li><a href="products.html">Edwin</a></li>
										<li><a href="products.html">New Balance</a></li>
										<li><a href="products.html">Jack & Jones</a></li>
										<li><a href="products.html">Paul Smith</a></li>
										<li><a href="products.html">Ray-Ban</a></li>
										<li><a href="products.html">更多</a></li>
									</ul>
								</div>
							</div>
						</div></li>
					<li class="grid"><a href="dogs.html">其它</a>
						<div class="mepanel">
							<div class="row">
								<div class="col1 me-one">
									<h4>昆虫</h4>
									<ul>
										<li><a href="products.html">蜘蛛</a></li>
										<li><a href="products.html">螳螂</a></li>
										<li><a href="products.html">蝎子</a></li>
										<li><a href="products.html">蜗牛</a></li>
										<li><a href="products.html">蚯蚓</a></li>
										<li><a href="products.html">蜥蜴</a></li>
										<li><a href="products.html">龙虾</a></li>
										<li><a href="products.html">更多</a></li>
									</ul>
								</div>
								<div class="col1 me-one">
									<h4>鱼类</h4>
									<ul>
										<li><a href="products.html">青鱼</a></li>
										<li><a href="products.html">草鱼</a></li>
										<li><a href="products.html">金鱼</a></li>
										<li><a href="products.html">中华鲟</a></li>
										<li><a href="products.html">扬子鳄</a></li>
										<li><a href="products.html">更多</a></li>
									</ul>
								</div>
								<div class="col1 me-one">
									<h4>奇葩宠物</h4>
									<ul>
										<li><a href="products.html">蟒蛇</a></li>
										<li><a href="products.html">剑齿虎</a></li>
										<li><a href="products.html">长颈鹿</a></li>
										<li><a href="products.html">狮子</a></li>
										<li><a href="products.html">蓝鲸</a></li>
										<li><a href="products.html">企稳</a></li>
										<li><a href="products.html">普氏野马</a></li>
										<li><a href="products.html">黑曼巴</a></li>
										<li><a href="products.html">更多</a></li>
									</ul>
								</div>
							</div>
						</div></li>
				</ul>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
	<!--bottom-header-->
	<!-- 复制部分结束 -->

	<%
		PetBean pet = (PetBean) session.getAttribute("dogPet");
	%>


	<!--start-breadcrumbs-->
	<div class="breadcrumbs">
		<div class="container">
			<div class="breadcrumbs-main">
				<ol class="breadcrumb">
					<li><a href="index.jsp">主页</a></li>

					<!-- 宠物名称 -->
					<li class="active"><%=pet.getName()%></li>


				</ol>
			</div>
		</div>
	</div>
	<!--end-breadcrumbs-->
	<!--start-single-->
	<div class="single contact">
		<div class="container">
			<div class="single-main">
				<div class="col-md-9 single-main-left">
					<div class="sngl-top">
						<div class="col-md-5 single-top-left">
							<div class="flexslider">
								<ul class="slides">

									<!-- 四个图片 -->

									<li data-thumb="<%=path%>/images/<%=pet.getImage1()%>"><img
										src="<%=path%>/images/<%=pet.getImage1()%>" /></li>
									<li data-thumb="<%=path%>/images/<%=pet.getImage2()%>"><img
										src="<%=path%>/images/<%=pet.getImage2()%>" /></li>
									<li data-thumb="<%=path%>/images/<%=pet.getImage3()%>"><img
										src="<%=path%>/images/<%=pet.getImage3()%>" /></li>
									<!-- 暂时只显示三个 -->
									<!-- <li data-thumb="images/s4.jpg">
									<img src="images/s4.jpg" />
								</li> -->


								</ul>
							</div>
							<!-- FlexSlider -->

							<script defer src="js/jquery.flexslider.js"></script>
							<script>
// Can also be used with $(document).ready()
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails"
  });
});
</script>
						</div>
						<div class="col-md-7 single-top-right">
							<div class="details-left-info simpleCart_shelfItem">
								<h3>名称</h3>
								<p class="availability">
									昵称: <span class="color"><%=pet.getNickName()%></span>
								</p>
								<div class="price_single">
									<%
										//特价
										if (pet.getMark() == 1) {
									%>
									<!-- 原价 -->
									<span class="reducedfrom">￥<%=pet.getNowPrice()%></span>
									<%
										}
									%>


									<!-- 特价 -->
									<span class="actual item_price">￥<%=pet.getSpecialPrice()%></span>
									<!-- 并不知道干吗<a href="#">click for offer</a> -->

								</div>
								<h2 class="quick">简单描述</h2>
								<p class="quick_desc">
									<%=pet.getIntroduce().substring(0, pet.getIntroduce().length()>80?80:pet.getIntroduce().length())%></p>
								<ul class="product-colors">
									<!-- 在这多添加一个同种动物进行演示  或者就仅仅进行展示，不用显示多个-->
									<h3>颜色</h3>
									<li><span><%=pet.getColor()%></span></li>


								</ul>
								<ul class="size">
									<h3>体型</h3>
									<li><a href="#"><%=pet.getShape()%></a></li>
									<!-- <li><a href="#">6</a></li> -->
								</ul>
								<div class="quantity_box">
									<ul class="product-qty">

										<span>重量:</span>
										<li><span><%=pet.getWeight()%></span></li>
										<!-- 写下它的重量 -->

									</ul>
								</div>
								<div class="clearfix"></div>

								<div class="single-but">
									<!-- <span class="buy"><input type="submit" value="立即购买"/></span> -->
									&nbsp;&nbsp;&nbsp;&nbsp;
									<!-- id,count,flag,userId,price -->
									<span class="item_add "><button
											class="btn btn-danger btn-lg"
											onclick="cart_add(<%=pet.getId()%>,1,1,<%=userId%>,<%=pet.getSpecialPrice()%>)">加入购物车</button></span>
								</div>
							</div>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="latest products">
						<div class="product-one">
							<!-- 仿照首页，直接粘过来 -->
							<!-- 需要先访问主页 -->
							<div class="clearfix"></div>




							<div class="container-fluid">
								<div class="row-fluid">
									<div class="span12">
										<div class="tabbable" id="tabs-331205">
											<ul class="nav nav-tabs">
												<li class="active"><a data-toggle="tab"
													href="#panel-501284">商品详情</a></li>
												<li><a data-toggle="tab" href="#panel-200857">累计评价</a>
												</li>
												<li><a data-toggle="tab" href="#panel-12345">总成交记录</a>
												</li>
											</ul>
											<div class="tab-content">
												<div class="tab-pane active" id="panel-501284">
													<table class="table">
														<thead>
															<tr>
																<th colspan="3">宠物名称：<%=pet.getName()%>
																</th>

															</tr>
														</thead>
														<tbody>
															<tr>
																<td>昵称：<%=pet.getNickName()%>
																</td>
																<td>性别：<%=pet.getSex()%></td>
																<td>体型：<%=pet.getShape()%></td>
															</tr>
															<tr class="success">
																<td>年龄：<%=pet.getAge()%></td>
																<td>颜色：<%=pet.getColor()%></td>
																<td>出产地：<%=pet.getAddress()%></td>
															</tr>
															<tr class="info">
																<td colspan="3">体重:<%=pet.getWeight()%></td>
															</tr>
															<tr class="warning">
																<td colspan="3">详细信息：<%=pet.getIntroduce()%>
																</td>
															</tr>
														</tbody>
													</table>
												</div>
												<div class="tab-pane" id="panel-200857">
													<ul class="cart-header">

														<!-- <li class="ring-in"><img src="../images/puppy.png" class="img-responsive" alt="" width="70px",height="70px">
								</li> -->
														<!-- 用户名 -->
														<li><span>用户名</span></li>
														<!--评价内容 -->
														<li><span>价格</span></li>
														<!-- 建议改成淘宝模式的增加数量 -->
														<!-- 购买产品 -->
														<li><span>数量</span></li>
														<!-- 评价时间 -->
														<li><span>评价时间</span></li>
														<!-- 评分 -->
														<li><span>评分</span></li>
														<div class="clearfix"></div>
													</ul>

													<div id="pet-comm">
														
													</div>

													<div id="example" style="text-align: center">
														<ul id="pageLimit"></ul>
													</div>

												</div>
												<!-- 第三部分 -->
												<div class="tab-pane" id="panel-12345">
													<ul class="cart-header">

														<!-- <li class="ring-in"><img src="../images/puppy.png" class="img-responsive" alt="" width="70px",height="70px">
								</li> -->
														<!-- 用户名 -->
														<li><span>用户名</span></li>
														<!--评价内容 -->
														<li><span>价格</span></li>
														<!-- 建议改成淘宝模式的增加数量 -->
														<!-- 购买产品 -->
														<li><span>成交时间</span></li>
														<div class="clearfix"></div>
													</ul>

													<div id="petHis">
														
													</div>
													<div id="example" style="text-align: center">
														<ul id="pageLimit"></ul>
													</div>

												</div>
											</div>
										</div>
									</div>
								</div>
							</div>







							<div class="clearfix"></div>
						</div>
					</div>
				</div>
				<div class="col-md-3 p-right single-right">
				<!-- 直接从数据库里读取，动态生成 -->
				<!-- 品种 -->
				<h3>品种</h3>
					<ul class="product-categories">
						
								<li><a href="dogs.jsp?category=大麦町犬">大麦町犬</a> <span class="count">(3)</span></li>
								
								<li><a href="dogs.jsp?category=杜宾犬">杜宾犬</a> <span class="count">(1)</span></li>
								
								<li><a href="dogs.jsp?category=西伯利亚雪橇犬">西伯利亚雪橇犬</a> <span class="count">(1)</span></li>
								
								<li><a href="dogs.jsp?category=藏獒">藏獒</a> <span class="count">(1)</span></li>
								
								<li><a href="dogs.jsp?category=吉娃娃">吉娃娃</a> <span class="count">(1)</span></li>
								
								<li><a href="dogs.jsp?category=灵缇犬">灵缇犬</a> <span class="count">(1)</span></li>
								
					</ul>
					<h3>颜色</h3>
					<ul class="product-categories">
					
					
						
								<li><a href="dogs.jsp?color=棕">棕</a> <span class="count">(1)</span></li>
								
								<li><a href="dogs.jsp?color=黑">黑</a> <span class="count">(1)</span></li>
								
								<li><a href="dogs.jsp?color=白色">白色</a> <span class="count">(1)</span></li>
								
								<li><a href="dogs.jsp?color=灰白">灰白</a> <span class="count">(1)</span></li>
								
								<li><a href="dogs.jsp?color=棕红">棕红</a> <span class="count">(1)</span></li>
								
								<li><a href="dogs.jsp?color=黑白">黑白</a> <span class="count">(2)</span></li>
								
								<li><a href="dogs.jsp?color=4">4</a> <span class="count">(1)</span></li>
								
					</ul>
					<h3>体型</h3>
					<ul class="product-categories">
					
						
								<li><a href="dogs.jsp?shape=中型">中型</a> <span class="count">(4)</span></li>
								
								<li><a href="dogs.jsp?shape=小型">小型</a> <span class="count">(1)</span></li>
								
								<li><a href="dogs.jsp?shape=大型">大型</a> <span class="count">(2)</span></li>
								
								<li><a href="dogs.jsp?shape=4">4</a> <span class="count">(1)</span></li>
								
					</ul>
			</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!--end-single-->


	<!-- 复制尾部部分 -->

	<!--start-footer-->
	<div class="footer">
		<div class="container">
			<div class="footer-top">
				<div class="col-md-3 footer-left">
					<h3>关于我们</h3>
					<ul>
						<li><a href="#">了解我们</a></li>
						<li><a href="contact.html">意见建议</a></li>
						<li><a href="#">博客</a></li>
						<li><a href="#">团队</a></li>
					</ul>
				</div>
				<div class="col-md-3 footer-left">
					<h3>帐户</h3>
					<ul>
						<li><a href="account.html">您的帐户</a></li>
						<li><a href="#">个人信息</a></li>
						<li><a href="contact.html">收货地址</a></li>
						<li><a href="#">快递追踪</a></li>
					</ul>
				</div>
				<div class="col-md-3 footer-left">
					<h3>购物指南</h3>
					<ul>
						<li><a href="#">订单查询</a></li>
						<li><a href="#">配送费收取标准</a></li>
						<li><a href="#">在线自助退货</a></li>
						<li><a href="#">帮助</a></li>
					</ul>
				</div>
				<div class="col-md-3 footer-left">
					<h3>爱宠种类</h3>
					<ul>
						<li><a href="#">狗狗</a></li>
						<li><a href="#">猫咪</a></li>
						<li><a href="#">小鸟</a></li>
						<li><a href="#">鱼类</a></li>
						<li><a href="#">其它</a></li>
					</ul>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!--end-footer-->
	<!--end-footer-text-->
	<div class="footer-text">
		<div class="container">
			<div class="footer-main">
				<p class="footer-class">
					© 2015 Free Style All Rights Reserved | Design by <a
						href="http://feng.sinaapp.com/" target="_blank">FENG</a>
				</p>
			</div>
		</div>
		<script type="text/javascript">
									$(document).ready(function() {
										/*
										var defaults = {
								  			containerID: 'toTop', // fading element id
											containerHoverID: 'toTopHover', // fading element hover id
											scrollSpeed: 1200,
											easingType: 'linear' 
								 		};
										*/
										
										$().UItoTop({ easingType: 'easeOutQuart' });
										
									});
								</script>
		<a href="#home" id="toTop" class="scroll" style="display: block;">
			<span id="toTopHover" style="opacity: 1;"> </span>
		</a>
	</div>
	<div id="userId" style="display:none"><%=userId %></div>
	<!--end-footer-text-->
	<!-- 尾部结束 -->
	<jsp:include page="modal.html"></jsp:include>

</body>
</html>